<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - transform controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
		<script src="js/libs/signals.min.js"></script>
		<script src="w2ui/jquery-3.5.1.min.js"></script>
		<script src="w2ui/w2ui-1.5.min.js"></script>
		<link type="text/css" rel="stylesheet" href="w2ui/w2ui-dark-1.5.min.css"/>
		<link type="text/css" rel="stylesheet" href="newlabel.css"/>

		<style type="text/css">
			.block {
    padding-top: 20px;
    padding-bottom: 10px;
    color: #999;
}
.w2ui-field input {
    width: 100px;
    text-align: right;
	background-color: cornflowerblue;
}
.w2ui-field > div > span {
    margin-left: 0px;
}
		</style>

	</head>
	<body style="margin: 0px;background-color: black;">

		<div id="toolbar" style="position:fixed;height:4%"></div>
		<table style="float:left">
			<tr>
				<td>
					<div id="leftPanel" class="w2ui-field" style="position:absolute; top: 4%; left:0%; width:20%; height:80%;background-color: #323948;">
						<div class="block">
							<b>Left Panel</b>
						</div>
					</div>
				</td>
				<td>
					<div id="container" style="position:absolute; top: 4%;left:20%; bottom: 20%; width:60%; height:80%; ">
					</div>
				</td>
				<td>
					<div id="sceneManager" style="position:absolute; top: 4%; left: 80%;width:20%;height:30%;">
					</div>
					<div id="property" style="position: absolute; top: 32.5%; left: 80%;width:20%;height:57.5%;">
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div id="assetMenu" style="position:fixed; top: 80%;  width:80%; height:20%; background-color:#444; color:#888;" >
					</div>
				</td>
			</tr>
		</table>

<script type="module">

	import * as THREE from './build/three.module.js'
	import {AssetManager} from './js/AssetManager.js'
	import {SceneManager} from "./js/SceneManager.js";
	import {Editor} from './js/Editor.js'
	import {Toolbar} from "./js/Toolbar.js";
	import {Property} from './js/Property.js'



	// editor.init();
	// editor.onWindowResize();
$(function () {
	var assetManager = new AssetManager();
	var editor = new Editor();
	var toolbar = new Toolbar(editor, assetManager);
	var sceneManager = new SceneManager(editor);
	var property = new Property(editor);

	// window.editor = editor;
	// window.THREE = THREE;

	//var viewport = new Viewport(editor);

	$('#assetMenu').w2layout(assetManager.config.layout);
	w2ui.assetManager.html('left', $().w2sidebar(assetManager.config.fileSidebar));
	w2ui.assetManager.html('main', $().w2grid(assetManager.config.fileGrid));


	function onWindowResize() {
		editor.signals.windowResize.dispatch();
	}
	window.addEventListener('resize', onWindowResize, false);
	onWindowResize();
});
</script>
	</body>
</html>